<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="css/muse-ui.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
		<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
		<link rel="stylesheet" href="css/muse-ui-loading.css">
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_951857_sr7zod4vu4.css">
		<script src="js/vue.min.js"></script>
		<script src="js/muse-ui.js"></script>
		<script src="js/muse-ui-loading.js"></script>
		<script src="js/muse-ui-toast.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/utils.js"></script>
		<style>
			.container{
				height:calc(100vh);
				width: 100%;
				padding: 20px;
			}
			.container input {
				color: #ff4081;
			}
			.login-head{
				margin-top: 20%;
				width: 100%;
				text-align: center;
			}
			.icon-denglu{
				color: #fff;
				font-size: 70px;
			}
		</style>
	</head>
	<body>
		<div id="body">
			<mu-appbar style="width: 100%;position: fixed;top: 0;padding-top: 20px;height: auto;" color="primary">
				<mu-button icon slot="left" @click="util.back()">
					<mu-icon value="arrow_back"></mu-icon>
				</mu-button>
				管网巡检
			</mu-appbar>
			<mu-container ref="container" style="padding: 0;padding-top: 86px;">
				<mu-tabs :value.sync="active" color="primary" full-width>
					<mu-tab @click="refresh">待开始</mu-tab>
					<mu-tab @click="refresh">进行中</mu-tab>
					<mu-tab @click="refresh">已完成</mu-tab>
				</mu-tabs>
				<mu-load-more @refresh="refresh" :refreshing="refreshing" :loaded-all="loadAll" :loading="loading" @load="load">
					<mu-list>
						<template v-if="list.length==0">
							<mu-paper :z-depth="2">
								<div style="width: 100%;height: 200px;color: #E6E6E6;text-align: center;line-height: 200px;">暂无{{states[active]}}任务</div>
							</mu-paper>
						</template>
						<template v-for="item,index in list">
							<mu-card :style="index!=0?'width: 100%; max-width: 375px; margin: 0 auto;margin-top:10px':'width: 100%; max-width: 375px; margin: 0 auto;'">
								<mu-card-title :title="item.taskName" :sub-title="'编号:'+item.taskNo"></mu-card-title>
								<mu-card-text>
									<mu-row gutter>
										<mu-col span="4">
											<div class="grid-cell label">巡检管道:</div>
										</mu-col>
										<mu-col span="8">
											<div class="grid-cell text">{{item.pipelineName}}</div>
										</mu-col>
									</mu-row>
									<mu-row gutter>
										<mu-col span="4">
											<div class="grid-cell label">开始点:</div>
										</mu-col>
										<mu-col span="8">
											<div class="grid-cell text">{{item.startPointName}}</div>
										</mu-col>
									</mu-row>
									<mu-row gutter>
										<mu-col span="4">
											<div class="grid-cell label">结束点:</div>
										</mu-col>
										<mu-col span="8">
											<div class="grid-cell text">{{item.endPointName}}</div>
										</mu-col>
										<mu-col span="5">
											<div class="grid-cell label">计划开始日期:</div>
										</mu-col>
										<mu-col span="7">
											<div class="grid-cell text">{{item.startDate|dateformat}}</div>
										</mu-col>
									</mu-row>
									<mu-row gutter>
										<mu-col span="5">
											<div class="grid-cell label">计划结束日期:</div>
										</mu-col>
										<mu-col span="7">
											<div class="grid-cell text">{{item.endDate|dateformat}}</div>
										</mu-col>
									</mu-row>
								</mu-card-text>
								<div style="padding: 20px;display: flex;justify-content: space-between;">
									<mu-button color="primary" @click="goPatrolPathMap(item)" v-if="item.state=='未开始'||item.state=='进行中'">进入任务</mu-button>
									<mu-button color="secondary" @click="goTaskPathMap(item)">查看路线</mu-button>
								</div>
							</mu-card>
						</template>
					</mu-list>
				</mu-load-more>
			</mu-container>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#body",
			data() {
				return {
					active: 0,
					list: [],
					refreshing: false,
					loading: false,
					loadAll: false,
					states: ['未开始', '进行中', '已完成'],
					start: 1,
					limit: 20
				}
			},
			filters: {
				dateformat: function(value) {
					return value.substring(0,10);
				}
			},
			methods: {
				goPatrolPathMap(task){
					util.setData("task",task);
					util.openWindow('patrolPathMap.html')
				},
				goTaskPathMap(task){
					util.setData("task",task);
					util.openWindow('taskPathMap.html')
				},
				getPatrolTaskByPatrolUserId(){
					var params = {
						'state':this.states[this.active],
						'start':this.start,
						'limit':this.limit
					}
				},
				refresh() {
					this.refreshing = true;
					this.$refs.container.scrollTop = 0;
					this.start = 1;
					var params = {
						'state':this.states[this.active],
						'start':this.start,
						'limit':this.limit
					}
					util.ajax('/api/method/getPatrolTaskByPatrolUserId',params,data=>{
						this.list = data.object.list;
						this.refreshing = false;
					})
				},
				load() {
					this.loadAll = false;
					this.loading = true;
					this.start = this.start+this.limit;
					var params = {
						'state':this.states[this.active],
						'start':this.start,
						'limit':this.limit
					}
					util.ajax('/api/method/getPatrolTaskByPatrolUserId',params,data=>{
						if(data.object.list.length<this.limit){
							this.loadAll = true;
						}else{
							this.list = this.list.concat(data.object.list);
						}
						this.loading = false;
					})
				}
			}
		})
		document.addEventListener('plusready', function() {
			vm.refresh();
		});
	</script>
</html>
